<template>
	<ScaleScreen
		:width="1920"
		:height="1080"
		class="scale-wrap"
		:fullScreen="true"
	>
		<div class="login-wrap">
			<el-form
				label-position="left"
				:model="form"
				:rules="rules"
				ref="form"
				label-width="0px"
				class="login-container"
			>
				<h3 class="title">能量管理系统</h3>
				<el-form-item prop="username" style="margin-bottom: 30px">
					<el-input
						type="text"
						v-model="form.username"
						auto-complete="off"
						placeholder="用户名"
					></el-input>
				</el-form-item>
				<el-form-item prop="password" style="margin-bottom: 30px">
					<el-input
						type="password"
						v-model="form.password"
						auto-complete="off"
						placeholder="密码"
					></el-input>
				</el-form-item>
				<!-- <el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox> -->
				<el-form-item style="width: 100%">
					<el-button
						type="primary"
						style="width: 100%"
						@click="submitForm"
						:loading="logining"
						>登录</el-button
					>
				</el-form-item>
			</el-form>
		</div>
	</ScaleScreen>
</template>
<script>
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
import { login } from "@/api/modules/user.js";
import { setToken } from "@/utils/auth";
export default {
	name: "login",
	components: { ScaleScreen },
	data() {
		return {
			//定义loading默认为false
			logining: false,
			// 记住密码
			rememberpwd: false,
			form: {
				username: "",
				password: "",
			},
			//rules前端验证
			rules: {
				username: [{ required: true, message: "请输入账号", trigger: "blur" }],
				password: [{ required: true, message: "请输入密码", trigger: "blur" }],
			},
		};
	},
	created() {},

	methods: {
		//获取info列表
		submitForm() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					login(this.form.username, this.form.password).then((res) => {
						setToken(res.data.token);
						this.$store.commit("SET_TOKEN", res.data.token);
						this.$store.dispatch("GetInfo").then((data) => {
							if (data) {
								this.$router.push({ path: "/energystation" });
							}
						});
					});
				}
			});
		},
	},
};
</script>

<style scoped>
.login-wrap {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	background-image: url("./../../assets/img/bg.png");
	background-color: #112346;
	background-repeat: no-repeat;
	background-position: center right;
	background-size: 100%;
	display: flex;
	align-items: center;
}

.login-container {
	border-radius: 10px;
	margin: auto 150px;
	width: 320px;
	padding: 30px 35px 15px 35px;
	background: #fff;
	border: 1px solid #eaeaea;
	text-align: left;
	box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
	margin: 10px auto 40px auto;
	text-align: center;
	color: #505458;
	font-size: 24px;
}

.remember {
	margin: 10px 0px 35px 0px;
}

.code-box {
	text-align: right;
}
</style>
